<!--用户管理-->
<template>
  <div class="page-container">
    <ex_super_table_page v-bind="option" ref="superTablePage">

      <template v-slot:accountCfg="{row}">

        <div v-for="item,index in row.productCfg" style="display: flex;" class="account-config-product">

          <div>产品类型: {{ $enumShow(item.productType, 'PmsProductTypeEnum') }} </div>

          <div>扣款账户: {{ $enumShow(item.accountType, 'CustomerAccountTypeEnum') }} </div>

          <div v-if="item.accountType == 'CREDIT'">账单日: {{ item.accountDay}} 号</div>

          <div v-if="item.accountType == 'CREDIT'">还款限制: {{ item.payLimitDay}} 天</div>

          <div v-if="item.accountType == 'CREDIT'">是否自动还款: {{ item.autoPayback}} </div>

          <div v-if="item.accountType == 'CREDIT'">自动还款日: {{ item.autoPayDay}} </div>

          <div>结算时自动购汇: {{ item.autoChangeCurrency}} </div>

        </div>

      </template>

    </ex_super_table_page>

    <el-dialog :title="'客户交易规则配置: ' + formValue.customerName + ' [' +  formValue.customerCode + ' ]'  "
               :visible.sync="dialogFormVisible" width="800px" :close-on-click-modal="false"
    customClass="dialog_auto"
    >
      <el-form ref="formEl" :model="formValue" :rules="rules" label-width="120px" class="common-form-panel-div"
               style="padding: 0px 10px; margin-top: 10px; width: 98%; ">

        <el-tabs v-model="activeName" type="card">
          <el-tab-pane v-for=" item,index in formValue.productCfg "
                       :label=" $enumShow(item.productType, 'PmsProductTypeEnum') "
                       :name=" item.productType "
              :key="'account_config_key_'+index">

            <el-row style="margin-top: 20px; ">
              <el-col style="width:40%;">
                <el-form-item label="产品扣款账户">
                  <ex_super_input type="select" enum="CustomerAccountTypeEnum" placeholder="扣款账户类型"
                                  v-model="item.accountType" clearable style="width: 100%;"/>

                </el-form-item>
              </el-col>

              <el-col style="width: 50%; ">
                <el-form-item label="" labelWidth="10">
                  <span style="color: #666; margin-left: 20px; ">
                    <i class="el-icon-warning" style="  margin-right: 6px; "></i>为空时，表示客户不能使用该类产品</span>
                </el-form-item>
              </el-col>

            </el-row>

            <el-row v-if="item.accountType == 'CREDIT'">
              <el-col style="width:40%;">
                <el-form-item label="账单生成日">
                  <el-input-number v-model="item.accountDay" :min="1" :max="27" label="账单日"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col style="width: 50%; ">
                <el-form-item label="" labelWidth="10">
                  <span style="color: #666; margin-left: 20px; ">
                    <i class="el-icon-warning" style="  margin-right: 6px; "></i>每月第几天</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="item.accountType == 'CREDIT'">
              <el-col style="width:40%;">
                <el-form-item label="还款限制">
                  <el-input-number v-model="item.payLimitDay" :min="1" :max="90" label="还款限制"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col style="width: 50%; ">
                <el-form-item label="" labelWidth="10">
                  <span style="color: #666; margin-left: 20px; ">
                    <i class="el-icon-warning" style="  margin-right: 6px; "></i>账单生成后的第几天
                  </span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="item.accountType == 'CREDIT'">
              <el-col style="width:40%;">
                <el-form-item label="自动还款">
                  <el-radio-group v-model="item.autoPayback">
                    <el-radio label="Y">开启</el-radio>
                    <el-radio label="N">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col style="width: 50%; ">
                <el-form-item label="" labelWidth="10">
                  <span style="color: #666; margin-left: 20px; ">
                    <i class="el-icon-warning" style="  margin-right: 6px; "></i>信用账单结算时，能否自动从预付款账户扣款
                  </span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="item.accountType == 'CREDIT' && item.autoPayback == 'Y'">
              <el-col style="width:40%;">
                <el-form-item label="自动还款日">
                  <el-input-number v-model="item.autoPayDay" :min="1" :max="60" label="自动还款日"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col style="width: 50%; ">
                <el-form-item label="" labelWidth="10">
                  <span style="color: #666; margin-left: 20px; ">
                    <i class="el-icon-warning" style="  margin-right: 6px; "></i>账单日后第几天从预付款账户扣款, 需 <= 还款限制
                  </span>
                </el-form-item>
              </el-col>
            </el-row>

<!--            <el-row v-if="item.accountType != 'CREDIT'">-->
<!--              <el-col style="width:50%;">-->
<!--                <el-form-item label="下单时自动购汇">-->
<!--                  <el-radio-group v-model="item.autoChangeCurrency">-->
<!--                    <el-radio label="Y">开启</el-radio>-->
<!--                    <el-radio label="N">关闭</el-radio>-->
<!--                  </el-radio-group>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--              <el-col style="width:50%;">-->
<!--                <el-form-item label="" labelWidth="10">-->
<!--              <span style="color: #666; margin-left: 20px; ">-->
<!--                <i class="el-icon-warning" style="  margin-right: 6px; "></i>下单时预付款余额不足，能否从其他币种账户扣款</span>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->

            <el-row v-if="item.productType== 'FIRST_TRANSPORT' || item.productType== 'LAST_TRANSPORT' ">
              <el-col style="width:100%;">

                <ex-table-auto
                  ref="tableAuto"
                  :url="'/fms-api/product/PmsTransportProductPermissionRpc/queryCustomerProductPermission.json?customerId=' + formValue.customerId +'&productType=' + item.productType + '&keyword=' + keyword"
                  style="width: 100%; "
                  height="400px"
                  :autoPage="false"
                  border
                >
<!--                  <el-table-column type="selection" width="55"></el-table-column>-->
                  <el-table-column property="date" label="可用产品" min-width="180">
                    <template slot="header" slot-scope="scope">
                      {{$enumShow(item.productType, 'PmsProductTypeEnum')}}产品列表
                      <el-input
                        v-model="keyword"
                        placeholder="输入关键字过滤"
                        clearable
                        style="width: 160px; margin-left: 12px;"
                      />
                    </template>
                    <template slot-scope="scope">
                      <span :class="scope.row.status == 'DISABLED'? 'disable-class' : ''">
                      {{ scope.row.productName }} [{{ scope.row.productCode }}]
                      </span>
                    </template>
                  </el-table-column>

                  <el-table-column property="versionId" label="价卡（套餐）配置" min-width="150">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.versionId" placeholder="请选择"
                                 @change="(obj)=>{ let chooseRow = scope.row.versions.filter(kkk=>kkk.versionId + '' === obj + '')[0];   scope.row.versionName = chooseRow.versionName; }"
                                 :disabled="scope.row.status == 'DISABLED'" :class="scope.row.status == 'DISABLED'? 'disable-class' : ''">
                        <el-option
                          v-for="vv in scope.row.versions"
                          :key="vv.versionId"
                          :label="vv.versionName + (vv.status === 'DISABLED' ? ' (已失效) ' : '') "
                          :value="vv.versionId">
                          <span style="float: left">{{ vv.versionName }}</span>
                          <span style="float: right; color: #8492a6; font-size: 13px" v-if="vv.status == 'DISABLED'">已失效</span>
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>

                  <el-table-column
                    property="date"
                    label="启用状态"
                    min-width="70"
                    :filters="[{ text: '启用', value: 'ENABLE' }, { text: '禁用', value: 'DISABLED' }]"
                    :filter-method="filterHandler"
                    filter-placement="bottom-end"
                  >
                    <template slot-scope="scope">
                      <el-switch
                        v-model="scope.row.status"
                        active-value="ENABLE"
                        inactive-value="DISABLED"
                        >
                      </el-switch>

                    </template>
                  </el-table-column>

                </ex-table-auto>

              </el-col>

            </el-row>


          </el-tab-pane>
        </el-tabs>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>

  let moduleName = "客户交易规则配置"
  import superTablePageFunction from '@/mixin/super-table-page-function';

  export default {

    title: moduleName,
    components: {},

    mixins: [superTablePageFunction],
    data() {

      let _this = this

      return {

        keyword: '',
        queryStatus: '',

        activeName: '',

        formModel: 'insert/update',

        userTypeArr: [{id: 'ADMIN', name: '管理员'}, {id: 'OPERATOR', name: '操作员'}],
        roleSystemArr: [{id: 'WMS', name: 'WMS'}, {id: 'TMS', name: 'TMS 运输系统'}, {id: 'OMS', name: '业务后台系统'}],
        roleSystemMap: {},

        dialogFormVisible: false,
        dialogTitle: '',
        formValue: {
          customerId: '',
          productCfg: []
        },
        rules: {
          companyName: [
            {required: true, message: '请输入企业名称', trigger: 'blur'},
            {min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur'}
          ],
          companyShortCode: [
            {required: true, message: '请输入企业编码', trigger: 'blur'},
            {min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur'}
          ]
        }

      };
    },


    watch: {
      'formValue.companyId'(val, old) {

      }
    },

    created() {

      let _this = this

      _this.roleSystemMap = {}
      _this.roleSystemArr.forEach(e => {
        _this.roleSystemMap[e.id] = e.name
      })

      _this.option = {
        search: {
          model: [
            {label: "label_customer", key: "customerIds", type: 'common_customer_choose', attrs: {multiple: true,},},
            // {
            //   label: "状态", key: "status", type: 'select', enum: 'IsAvailableStatusEnum', attrs: { clearable: true },
            // }
          ],
        },
        action: [
          // {
          //   label: '新增银行卡', attrs: {icon: "el-icon-plus"}, click: () => {
          //     this.dialogTitle = '新增银行卡'
          //     this.dialogFormVisible = true
          //     this.formValue = {}
          //   }
          // },
        ],

        table: {
          url: "/fms-api/customer/CustomerAccountConfigRpc/select.json",
          attrs: {
            'cell-style': ({row, column, rowIndex, columnIndex}) => {
              if (column.property == 'status') {
                return {color: row.status == 'NORMAL' ? this.$globalCss.successColor : this.$globalCss.infoColor}
              }
            }
          },
          model: [
            {
              key: 'companyName', label: '客户名称', align: 'left', attrs: {
                formatter: (r, c, v, i) => {
                  return '[' + r.customerCode + '] ' + r.customerName
                }
              }, 'min-width': 100

            },

            {slot: 'accountCfg', label: '配置信息' , 'min-width': 400 },
            {
              type: 'operate', width: 120,
              operate: [
                // {
                //   label: '禁用',
                //   type: "confirm-button",
                //   message: "确定要禁用吗？禁用后该客户将不能进行下单",
                //   url: '/fms-api/customer/CustomerAccountConfigRpc/disable.json',
                //   if: (row) => {
                //     return row.status == 'ENABLE'
                //   },
                //   params: (v) => {
                //     return { id: v.id }
                //   },
                //   done: ['reload', 'tip'],
                // },
                // {
                //   label: '启用',
                //   type: "confirm-button",
                //   message: "确定要启用吗？",
                //   url: '/fms-api/customer/CustomerAccountConfigRpc/enable.json',
                //   if: (row) => {
                //     return row.status != 'ENABLE'
                //   },
                //   params: (v) => {
                //     return { id: v.id }
                //   },
                //   done: ['reload', 'tip']
                // },

                {
                  label: '编辑',
                  auth:'fms_customer_account_config_edit',
                  click: (row) => {
                    // this.formValue = JSON.parse(JSON.stringify(row))
                    // this.dialogFormVisible = true

                    _this.$ajax({
                      url: '/fms-api/customer/CustomerAccountConfigRpc/detail.json',
                      data: {id: row.id},
                      success: (res) => {
                        _this.formValue = res.data
                        _this.dialogFormVisible = true

                        _this.activeName = 'FIRST_TRANSPORT'

                      }
                    });

                  }

                }


              ],
            }
          ]
        }
      }


    },

    props: {},

    destroyed() {

    },

    methods: {

      print(obj){
        console.log(obj)
      },

      filterHandler(value, row, column) {
        return row['status'] === value;
      },

      submitForm() {

        let _this = this

        _this.$refs['formEl'].validate((valid) => {
          if (valid) {

            _this.$ajax({
              url: '/fms-api/customer/CustomerAccountConfigRpc/saveUpdate.json',
              type: 'json',
              data: _this.formValue,
              success: (responseData) => {
                this.$message({
                  showClose: true,
                  message: '提交成功',
                  type: 'success'
                })
                _this.$refs['superTablePage'].reload()
                _this.dialogFormVisible = false
              }
            });


            let versionArr = []

            _this.$refs['tableAuto'].forEach(table=>{
              let tmpArr = table.getData()

              if(tmpArr && tmpArr.length > 0){
                versionArr = versionArr.concat(tmpArr)
              }

            })

            if(versionArr.length > 0){
              _this.$ajax({
                url: '/fms-api/product/PmsTransportProductPermissionRpc/batchUpdateProductPermission.json',
                data: {
                  customerId: _this.formValue.customerId,
                  customerCode: _this.formValue.customerCode,
                  customerName: _this.formValue.customerName,
                  json: JSON.stringify(versionArr)
                }

              });

            }

          } else {
            return false;
          }

        });

      }


    }
  };

</script>
<style>
  .small-btn span {
    font-size: 14px;
  }

  .small-btn .el-button--small span {
    font-size: 14px;
  }

  .account-config-product{
    display: flex;
    line-height: 32px;
  }

  .account-config-product div{
    width: 140px;
  }

</style>
